<template>
    <n-modal :show-icon="false" v-model:show="showModal" preset="dialog" title="添加" 
        style="width:50%" :on-positive-click="submitCallback" 
        :on-close="cancelCallback" >
        <div class="modalBox">
            <n-form ref="formRef" label-placement="left" label-width="auto" require-mark-placement="right-hanging"
                :style="{
                    maxWidth: '640px'
                }">
                <n-form-item label="昵称" path="inputValue">
                    <n-input placeholder="请输入" v-model:value="formData.usename"  />
                </n-form-item>
                <n-form-item label="电话" path="inputValue"> 
                    <n-input placeholder="请输入" v-model:value="formData.mobile"  />
                </n-form-item>
                <n-form-item label="邮箱" path="inputValue">
                    <n-input placeholder="请输入" v-model:value="formData.userEmail"  />
                </n-form-item>
                <n-form-item label="岗位" path="inputValue">
                    <n-input placeholder="请输入" v-model:value="formData.job"  />
                </n-form-item>
                <n-form-item label="系统角色" path="multipleSelectValue">
                    <n-tree-select multiple cascade checkable :options="rolelistSelect"  label-field="roleName" key-field="_id"  :default-value="formData.rolelist[0]" :on-update:value="roleArrFun"
                        placeholder="请选择系统角色"  />
                </n-form-item>
                <n-form-item label="部门" path="multipleSelectValue">
                    <!-- <n-tree-select :options="deptIdSelect" :default-value="formData.deptId" children-field="children" label-field="deptName" key-field="_id" :on-update:value="deptIdSelectFun"
                        placeholder="请选择系统部门" /> -->
                         <n-cascader :options="deptIdSelect" placeholder="请选择部门" :default-value="formData.deptId"
                            label-field="deptName" :check-strategy="checkStrategy" value-field="_id"
                            children-field="children" @update:value="deptIdSelectFun" />
                </n-form-item>
                <n-form-item label="状态" path="multipleSelectValue">
                  <n-select placeholder="请输入" v-model:value="formData.status"  :default-value="formData.status" :options="statusList" />
                </n-form-item>
                <!-- <n-form-item label="状态" path="switchValue">
                    <n-switch  v-model:value="formData.status"  />
                </n-form-item> -->
                <n-form-item label="备注" path="textareaValue">
                    <n-input placeholder="备注" type="textarea" v-model:value="formData.remark"  :autosize="{
                        minRows: 3,
                        maxRows: 5
                    }" />
                </n-form-item>
            </n-form>
        </div>
         <template #action>
        <n-space>
          <n-button @click="cancelCallback">取消</n-button>
          <n-button type="info" :loading="formBtnLoading" @click="submitCallback">确定</n-button>
        </n-space>
      </template>
    </n-modal>
</template>

<script lang="ts">

import { defineComponent, reactive, ref, toRefs ,onBeforeMount} from 'vue'
import { userListAdd } from '../../../../api/user.js'
import {roleList} from '../../../../api/role'
import {deprtList } from '../../../../api/dept'
import { FormInst, FormItemRule, TreeSelectOption,useMessage  } from 'naive-ui'
const message = useMessage() 
export default defineComponent({
    props: {
        addUserMdel: Boolean,
        userid:String,
        dataTable:Object,
        typeMael:String
    },
    setup(props, { emit }) {
        const formRef = ref<FormInst | null>(null)
        const showModal = ref(props.addUserMdel)
        const defaultValue=ref(props.dataTable)
        const state = reactive({
            formData: {
                usename: '',
                userEmail: '',
                mobile: '',
                job: '',
                status: '',
                rolelist: [],
                deptId: null,
                remark: '',
                action: 'add'
            },
            rolelistSelect: [],
            deptIdSelect: [],
            statusList: [
                {
                    label: "实习生",
                    value: "1"
                },
                    {
                    label: "在职",
                    value: "2"
                },
                    {
                    label: "大佬",
                    value: "3"
                },
            ],
             formBtnLoading: false,

        })
        onBeforeMount(()=>{
             roleList({}).then(res=>{
                state.rolelistSelect = res.data
           })
           deprtList({}).then(res=>{
               state.deptIdSelect=res
           })
        //    console.log('----------',props.typeMael)
            if(props.typeMael=='add') return
            //@ts-ignore
           state.formData=defaultValue.value
          
        })
        const methds = reactive({
            cancelCallback() {
                showModal.value=false
                //@ts-ignore
                state.formData={}
                emit('addUserClear', false)
            },
            submitCallback() {
                if(state.formData.usename == '' || state.formData.userEmail =='' || state.formData.mobile =='' ){
                       message.error('参数不能为空')
                       return
                }
                userListAdd(state.formData).then(res => {
                     showModal.value=false
                     //@ts-ignore
                      state.formData={}
                     message.success('操作成功')
                     emit('addUserClear', 'add')
                })
            },
            //部门
            deptIdSelectFun(value: string | null , option: TreeSelectOption | null | Array<TreeSelectOption | string >) {
                state.formData.deptId = value
            },
            //系统角色
            roleArrFun(value: Array<string | number> | null, option: Array<TreeSelectOption | null>) {
                state.formData.rolelist=[...value]
            }
        })
        return {
            showModal,
            defaultValue,
            ...toRefs(methds),
            ...toRefs(state),
            checkStrategy:'all'
        }
    }
})
</script>

<style lang="scss">
.modalBox {}
</style>